<template>
  <el-container>
    <el-header><h1 align="center">公司员工信息汇总</h1></el-header>
    <el-container>
      <el-aside width="200px">
        <el-tree
          :data="companyList"
          node-key="id"
          :props="defaultProps"
          @node-click="handleNodeClick">
        </el-tree>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    export default {
      name: "Home",
      methods:{
        handleNodeClick(data,node){
          if(node.isLeaf){
            this.$router.push({path:"/showEms",query:{deptId:data.id}})
          }
        }
      },
      data(){
        return{
          defaultProps:{
            children:'deptList',
            label:'name'
          },
          companyList:[]
        }
      },
      created() {
         this.axios({
           method:"get",
           url:"/company"
         }).then((res)=>{
           this.companyList=res.data
         })
      }
    }
</script>

<style scoped>
  .el-container{
    border: solid 1px red;
  }
  .el-header{
    border: dotted 1px yellow;
  }
  .el-aside{
    border: dotted 1px aquamarine;
  }
  .el-main{
    border: dotted 1px green;
  }
  .el-footer{
    border: dotted 1px gray;
  }
</style>
